<template>
  <div class="search">
    <div class="search-top">
      <p class="btn-new" @click="getBack">
        <img src="../assets/images/Return.png" alt="" />
      </p>
      <van-search
        show-action
        v-model="value"
        left="地址"
        placeholder="请输入搜索关键词"
        shape="round"
        @input="getSearchData(value)"
      >
        <template #action>
          <div @click="onSearch(value)" class="btn-search">搜索</div>
        </template>
      </van-search>
    </div>

    <div class="sousuo-box" v-if="sousuoLishi.length > 0">
      <div class="nav-title">搜索历史</div>
      <div class="nav-item-box">
        <div class="nav-item" v-for="(val, index) in sousuoLishi" :key="index"  @click="onSearch(val)">
          {{ val }}
        </div>
      </div>
    </div>

    <div class="search-hotword" v-if="searchItem.length > 0">
      <div class="search-top-title">相关搜索</div>
      <div class="search-test">
        <ul
          class="test-list"
          v-for="(inpVal, num) in searchItem"
          :key="num"
          @click="onSearch(inpVal)"
        >
          <img src="../assets/images/sousuo.png" alt="" />
          <li class="test-item">{{ inpVal }}</li>
        </ul>
      </div>
    </div>

    <div class="notchangeinp" v-else>
      <div class="top">
        <div class="nav-title">推荐搜索</div>
        <div class="nav-item-box">
          <div
            class="nav-item"
            v-for="(value, j) in hotWord"
            :key="j"
            @click="onSearch(value)"
          >
            {{ value }}
          </div>
        </div>

        <div class="content-item-box">
          <van-tabs animated @click="getId(active)" v-model="active">
            <van-tab
              v-for="(item, index) in contentTitleData"
              :title="item.categoryName"
              :key="index"
            >
              <div class="content-item">
                <p class="content-item-title">
                  {{ item.categoryName
                  }}<van-icon name="fire-o" color="#ee0a24" />
                </p>

                <div
                  class="content"
                  v-for="(val, i) in contentListeData"
                  :key="i"
                  @click="onSearch(val.display_word)"
                >
                  <span>{{ i + 1 }}</span>
                  {{ val.display_word }}
                </div>
                <span class="most">查看更多<van-icon name="arrow" /></span>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { throttle } from "../libs/utils";
export default {
  name: "search",
  data() {
    return {
      value: "",
      arrData: [],
      searchItem: [],
      sousuoLishi: [],
      contentTitleData: [],
      contentListeData: [],
      active: 0,
      num: -1,
      hotWord: [],
    };
  },
  created() {
    this.getTitleData();
    this.getNameData(this.num);
    this.getHotData();
    this.getLiShi();
  },
  methods: {
    getBack() {
      this.$router.go(-1);
    },
    onSearch(value) {
      if (value == "") {
        // console.log("请输入要搜索的内容");
        return;
      }else{

        this.$router.push({ name: "changeinp", params: { value } });
  
        var localChatData = localStorage.getItem("word");
  
        if (!localChatData) {
          localChatData = [];
        } else {
          localChatData = JSON.parse(localChatData);
        }
        localChatData.unshift(value);
        localStorage.setItem("word", JSON.stringify(localChatData));
      }
    },
    getLiShi() {
      if (!localStorage.getItem("word")) {
        this.sousuoLishi = [];
      } else {
        let result = Array.from(new Set(JSON.parse(localStorage.getItem("word"))));
        this.sousuoLishi = result;
      }
    },
    getSearchData(value) {
      this.axios({
        methods: "get",
        url: "https://apis.netstart.cn/ximalaya/search/recommendSearch",
        params: {
          kw: value,
        },
      })
        .then((result) => {
          this.arrData = result.data.data;
          console.log(this.arrData);
          let inpVal = value;
          this.searchItem = this.arrData.filter((item) => {
            if (item.includes(inpVal)) {
              return item;
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getTitleData() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/ximalaya/search/hotWordBillboardCategory",
      })
        .then((value) => {
          // console.log(value);
          this.contentTitleData = value.data.category;
          //   console.log(this.contentTitleData);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getNameData(num) {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/ximalaya/search/hotWordBillboardList?size=10",
        params: {
          categoryId: num,
        },
      })
        .then((result) => {
          //   console.log(result);
          this.contentListeData = result.data.hotWordResultList;
          //   console.log(this.contentListeData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getId(active) {
      let num = this.contentTitleData[active].categoryId;
      // console.log(num);
      this.getNameData(num);
      this.getHotData();
    },
    getHotData() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/ximalaya/search/words",
      })
        .then((result) => {
          // console.log(result);
          let arr = result.data.data;
          let num = 11;
          let newArr = [];

          // console.log(this.hotWord);
          for (let i = 0; i < num; i++) {
            let ran = Math.floor(Math.random() * arr.length);
            newArr.push(arr.splice(ran, 1)[0]);
          }
          this.hotWord = newArr;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.search-top {
  .btn-new {
    display: inline-block;
    float: left;
    font-size: 24px;
    margin-top: 15px;
    margin-left: 5px;
    color: #ccc;
    height: 10px;
    img {
      width: 20px;
    }
  }
}
.btn-search {
  color: #e4393c;
}
.search-tip {
  .tip-txt {
    img {
      width: 20px;
    }
  }
}
.nav-title {
  font-size: 16px;
  padding: 0 10px;
}
.nav-item-box {
  margin-top: 5px;
  padding: 0 20px;
  font-size: 12px;
}
.nav-item {
  background-color: rgb(247, 248, 250);
  display: inline-block;
  padding: 2px 3px;
  border-radius: 10px;
  margin-right: 5px;
  margin-top: 5px;
  color: dimgray;
}
.content-item-box {
  padding: 0 10px;
  margin-top: 30px;
  overflow-y: hidden;
  white-space: nowrap;
  overflow-x: scroll;
  .content-item {
    width: 355px;
    height: 370px;
    box-shadow: -1px -1px 2px 1px #ccc inset;
    display: inline-block;
    border-radius: 10px;
    // margin-left: 10px;

    .content {
      font-size: 14px;
      padding: 5px 15px;
      color: rgb(139, 139, 139);

      span {
        margin-right: 10px;
      }
    }

    .most {
      font-size: 14px;
      display: inline-block;
      color: rgb(139, 139, 139);
      text-align: center;
      padding: 0 142px;
      border-top: 1px solid #ccc;
    }
  }
}
.search-top-title {
  // padding: 0 10px;
  font-size: 14px;
  border-bottom: 1px solid whitesmoke;
}
.test-list {
  padding: 5px 0px;
  // background-color: red;
  border-bottom: 1px solid whitesmoke;
  img {
    width: 16px;
    // line-height: 32.6px;
  }
  li {
    display: inline-block;
    font-size: 14px;
    color: dimgray;
    margin-left: 5px;
  }
}
.search {
  padding-bottom: 100px;
}
.sousuo-box {
  padding-bottom: 10px;
}
</style>